<!--
 * @Author: Qimu
 * @Date: 2020-09-02 16:30:57
 * @LastEditors: Qimu
 * @LastEditTime: 2020-09-15 13:47:12
 * @Description: file content
 * @FilePath: \vue-admin-koa2\vue-admin\src\components\Common\Table.vue
-->
<template>
  <div class="table">
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      size="small"
      @selection-change="handleSelectionChange"
    >
      <!-- 序列号 -->
      <el-table-column label="#" type="index"></el-table-column>
      <!-- 多选功能 -->
      <el-table-column type="selection" width="55" v-if="tableInfo.selection !== false"></el-table-column>
      <!-- 表格主体内容 -->
      <el-table-column
        v-for="(item, index) in tableInfo.tableKey"
        :prop="item.prop"
        :label="item.label"
        :key="index"
        :formatter="item.formatterTable"
        align="center"
      >
        <template slot-scope="scope">
          <el-switch
            v-if="item.switch"
            :value="scope.row.role_status"
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            inactive-text="停用"
            :active-color="item.activeColor"
            v-model="scope.row.role_status"
            @change="changeRoleState(scope.row)"
          ></el-switch>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" v-if="tableInfo.operation !== false">
        <template v-if="true" slot-scope="scope">
          <slot :scope="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    //表格数据
    tableData: {
      type: Array,
      required: true,
    },
    //表头信息
    tableInfo: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {}
  },
  created() {
    console.log('tableInfo', this.tableInfo)
  },
  methods: {
    //表格多选
    handleSelectionChange(value) {
      this.$emit('handleSelectionDel', value)
    },

    //切换开关
    changeRoleState(value) {
      this.$emit('changeRoleState', value)
    },
  },
}
</script>
